/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-11 10:23:58
 */
import { usePlay } from "@/hooks/play/usePlay";
import { IAllObject } from "@/types/base";
import React, { memo, ReactNode, useEffect, useState } from "react";
import "./myTable.scss";
import Loading from "../loading/Loading";
import SvgIcon from "../SvgIcon/SvgIcon";
import { IColumn, IStyle, TStyleMap, event } from "./types";
import { render } from "react-dom";

interface IMyTableProps {
  columns: IColumn[]; //列
  tableData: any[]; //表格数据
  showTHead?: boolean; //是否展示表头
  showDefaultColumn?: boolean; //是否展示默认的几列数据(索引和操作)
  [propName: string]: any;
}
// 样式缓存
const styleMap: TStyleMap = new Map();

// 计算样式
const getStyle = (col: IColumn) => {
  if (styleMap.has(col.prop)) return styleMap.get(col.prop);
  const style: IStyle = {};
  if (col.width) {
    let width = `${col.width}`;
    style.width = `${width.replace("px", "")}px`;
  }
  if (col.flex) style.flex = col.flex;
  styleMap.set(col.prop, style);
  return style;
};
// 处理事件回调
const handleCallBack = (row: IAllObject, col: IColumn, event: event) => {
  // @ts-ignore
  typeof col[event] === "function" && col[event](row);
};
// 索引列
const IndexColumn = (index: number, id: number, currentId: number) => {
  return (
    <td className="index flex-c-c">
      {id !== currentId ? (
        <div>{index < 9 ? "0" + (index + 1) : index + 1}</div>
      ) : (
        <SvgIcon
          name="playing-vioice-icon"
          size={22}
          className="text-theme-color"
        />
      )}
    </td>
  );
};

const MyTable: React.FC<IMyTableProps> = memo((props) => {
  const { columns, tableData, showTHead, showDefaultColumn } = props;
  const { playState } = usePlay();
  const [showLoading, setShowLoading] = useState(true);

  useEffect(() => {
    if (tableData && tableData.length > 0) setShowLoading(false);
  }, [tableData]);

  // 设置内容，相当于vue的作用域插槽
  const setContent = (row: any, col: IColumn) => {
    if (props[col.prop]) {
      if (typeof props[col.prop] !== "function") return row[col.prop];
      return props[col.prop](row);
    } else {
      return row[col.prop];
    }
  };
  return (
    <>
      <table className="myTable trans">
        {showTHead && (
          <thead>
            <tr>
              {showDefaultColumn && (
                <>
                  <th className="index"></th>
                  <th className="edit">操作</th>
                </>
              )}

              {columns.map((item, index) => {
                return (
                  <th key={index} style={getStyle(item)}>
                    {item.label}
                  </th>
                );
              })}
            </tr>
          </thead>
        )}
        <tbody>
          {tableData.map((row, index) => {
            return (
              <tr key={row.id} className={index % 2 ? "zebra" : ""}>
                {showDefaultColumn &&
                  IndexColumn(index, row.id, playState.songId)}
                {showDefaultColumn && (
                  <td className="edit flex-c">
                    <SvgIcon name="love" size={20} hover></SvgIcon>
                    <SvgIcon name="download" hover className="ml-1"></SvgIcon>
                  </td>
                )}
                {columns.map((col) => {
                  return (
                    <td
                      key={col.label}
                      className={col.class}
                      style={getStyle(col)}
                      onClick={() => handleCallBack(row, col, "click")}
                      onDoubleClick={() => handleCallBack(row, col, "dbClick")}
                    >
                      {setContent(row, col)}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      <Loading show={showLoading} />
    </>
  );
});
MyTable.defaultProps = {
  showTHead: true,
  showDefaultColumn: true,
};
export default MyTable;
